<template>
  <div :class="!isDialog && 'sign-wrap'">
    <div class="sign-in sign-up">
      <IconLogoText v-if="!isDialog" />

      <div class="sign-form__wrap">
        <el-form ref="formRef" label-width="0px" :model="formData" :rules="rules" @submit.native.prevent="onSubmit">
          <p class="sf-tips">你所在地区仅支持手机号注册，只需一个 Omni 账号，即可访问 Omni 的所有服务。</p>
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              prefix-icon="el-icon-mobile-phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>

          <el-form-item prop="email">
            <el-input v-model="formData.email" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item class="form-pwd" prop="password">
            <el-input
              v-model="formData.password"
              :type="viewPwd ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            >
              <div slot="suffix" class="pointer" @click="handleViewPwd">
                <IconView v-show="viewPwd" />
                <IconHide v-show="!viewPwd" />
              </div>
            </el-input>
          </el-form-item>

          <el-form-item class="form-pwd" prop="checkPass">
            <el-input
              v-model="formData.checkPass"
              :type="viewPwd2 ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
              placeholder="请再次输入密码"
            >
              <div slot="suffix" class="pointer" @click="viewPwd2 = !viewPwd2">
                <IconView v-show="viewPwd2" />
                <IconHide v-show="!viewPwd2" />
              </div>
            </el-input>
          </el-form-item>

          <!-- <p class="sf-tips">注册登录即代表已阅读并同意我们的 用户协议 与 隐私政策</p> -->

          <el-form-item class="form-submit">
            <el-button class="form-submit__btn" type="primary" native-type="submit">注册</el-button>
          </el-form-item>
        </el-form>

        <div v-if="!isDialog" class="sign-up__btn">
          <router-link to="/signIn">返回登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* {
    "username": "testuser4",
    "password": "test123456",
    "email": "testuser4@example.com"
} */
import { createForm, createFormFules } from './create'
/* request */
import { apiRegister } from '@/api/login/index'
/* util */
import { objOmit } from '@/utils/object'

const mockForm = {
  username: 'testuser4',
  password: 'test123456',
  checkPass: 'test123456',
  email: 'testuser4@example.com'
}

export default {
  name: 'SignUp',

  props: {
    isDialog: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      formData: createForm(mockForm),
      rules: createFormFules(this),

      viewPwd: false,
      viewPwd2: false
    }
  },

  methods: {
    handleViewPwd() {
      this.viewPwd = !this.viewPwd
    },

    onSubmit() {
      this.$refs.formRef
        .validate()
        .then(res => {
          const data = objOmit(this.formData, 'checkPass')
          // console.log(res, data)
          this.apiRegister(data)
        })
        .catch(err => {
          console.log(err)
        })
    },

    apiRegister(data) {
      apiRegister(data)
        .then(res => {
          // console.log('apiRegister', res)
          if (res.err) {
            this.$message({
              message: res.err,
              type: 'error'
              // duration: 0
            })
          } else if (res.msg) {
            this.$message.success(res.msg)
            this.$emit('sign-up-success')
          } else {
            this.$message.error(res)
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    }
  }
}
</script>

<style lang="less">
@import './../SignIn/sign.less';
</style>
